<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-text-desc desc-mg">{{'protection_select_es_index_tip_label' | i18n}}</div>
<lv-group lvGutter='4px'>
    <div class="hive-all-table">
        <div class="custom-table-header">{{'protection_selecte_index_label' | i18n}}</div>
        <lv-datatable [lvData]="allTableData" #lvAllTable [lvScroll]="{y: '580px'}" [lvPaginator]='pageA' lvSize="small"
            lvSelectionMode='multiple' [lvSelection]='selectionData' lvCompareWith="uuid"
            (lvSelectionChange)="selectionChange()" lvAsync>
            <thead>
                <tr>
                    <th lvShowCheckbox width='64px' [lvRowsData]='lvAllTable.renderData | selectable'>
                    </th>
                    <th>{{'common_name_label' | i18n}}</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of lvAllTable.renderData">
                    <td width='64px' lvShowCheckbox [lvRowData]='item' [lvDisabled]="item.disabled">
                    </td>
                    <td>
                        <span>{{item.name}}{{item.extendInfo?.type === 'DATA_STREAM'?dataFlowLabel:''}}</span>
                    </td>
                </tr>
            </tbody>
        </lv-datatable>
        <ng-container *ngIf="totalTable > 0">
            <lv-paginator #pageA lvMode='simple' lvShowPageSizeOptions="false"
                [lvPageSize]="pageSize" [lvTotal]="totalTable" (lvPageChange)="pageChange($event)">
            </lv-paginator>
        </ng-container>
    </div>
    <div class="arrow-container">
        <i lv-icon="aui-select-arrow"></i>
    </div>
    <div class="hive-selected-table">
        <lv-datatable [lvData]="selectedTableData" #lvSelectTable [lvScroll]="{y: '580px'}" lvSize="small"
            [lvPaginator]='pageS'>
            <thead>
                <tr>
                    <th>
                        <lv-group class="th-group">
                            <span>{{'protection_selected_index_label' | i18n}}</span>
                            <span class="aui-link" (click)="clearSelected()">
                                {{'protection_clear_all_label' | i18n}}
                            </span>
                        </lv-group>
                    </th>
                </tr>
                <tr>
                    <th>{{'common_name_label' | i18n}}</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of lvSelectTable.renderData">
                    <td>
                        <lv-group class="th-group">
                            <span>{{item.name}}{{item.extendInfo?.type === 'DATA_STREAM'?dataFlowLabel:''}}</span>
                            <i lv-icon="lv-icon-close"  lvColorState='true'
                                (click)="removeSingle(item)"></i>
                        </lv-group>
                    </td>
                </tr>
            </tbody>
        </lv-datatable>
        <ng-container *ngIf="selectedTableData.length">
            <lv-paginator #pageS lvMode='simple' lvShowPageSizeOptions="false" lvPageSize="100">
            </lv-paginator>
        </ng-container>
    </div>
</lv-group>
